.layout {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  &-layout {
    width: 100%;
    height: 72px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 24px;
  }

  &-title {
    display: flex;
    flex-shrink: 0;
    user-select: none;
    @include text-semibold;
    font-size: 20px;
    margin-right: 20px;
  }

  &-suffix {
    &-layout {
      height: 32px;
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
    }
  }
}

.filter {
  &-layout {
    width: 100%;
    height: 46px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 24px;
    gap: 8px;
  }


  &-tabs {
    width: 50%;
    >:nth-child(1) {
      margin: 0;
    }
  }

  &-suffix {
    &-layout {
      max-width: 380px;
      min-width: 200px;
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
    }
  }
}


.list {
  &-layout {
    width: 100%;
    gap: 16px;
    padding: 8px 24px 24px 24px;
  }
}


.card {
  &-wrapper {
    cursor: pointer;
    flex: 1;
    height: 238px;
    display: flex;
    flex-direction: column;
  }

  &-img {
    &-wrapper {
      width: 100%;
      height: 152px;
    }
  }

  &-info {
    &-wrapper {
      width: 100%;
      height: 86px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      box-sizing: border-box;
      padding: 0 16px;
    }

    &-title {
      &-wrapper {
        width: 100%;
        height: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
      }
      &-icon {
        color: $color-primary;
        font-size: 20px;
      }
      &-text {
        user-select: none;
        @include text-medium;
        font-size: 16px;
        // letter-spacing: 0.03rem;
        color: #242424;
      }
    }

    &-assets-num {
      user-select: none;
      @include text-regular;
      font-size: 14px;
      letter-spacing: 0.03rem;
      color: #707070;
    }
  }
}